<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { Notification } from '@arco-design/web-vue';
  import { searchRoad, updateRoadStatus } from '@/api/system-basic';

  const columns: any[] = [
    {
      title: '巷道',
      dataIndex: 'road',
    },
    {
      title: '巷道名称',
      dataIndex: 'roadName',
    },
    {
      title: '状态',
      dataIndex: 'status',
    },
    {
      title: '操作',
      dataIndex: 'action',
      slotName: 'action',
      align: 'center',
    },
  ];

  // 创建一个响应式的本地副本
  const localTableData = ref<any[]>([]);

  async function getRoadList() {
    localTableData.value = await searchRoad('');
  }
  onMounted(() => {
    getRoadList();
  });
  // 启动
  async function handleEdit(record: any) {
    const param: any = {
      road: record.road,
      roadName: record.roadName,
      status: record.status,
      statusCode: '1',
    };
    const result = await updateRoadStatus(param);

    if (result.retCode === '200') {
      Notification.success({
        title: '成功',
        content: '启动成功',
        closable: true,
      });
    } else {
      Notification.error({
        title: '失败',
        content: '启动失败',
        closable: true,
      });
    }
    getRoadList();
  }
  // 禁用
  async function cancelEdit(record: any) {
    const param: any = {
      road: record.road,
      roadName: record.roadName,
      status: record.status,
      statusCode: '0',
    };

    const result: any = await updateRoadStatus(param);
    if (result.retCode === '200') {
      Notification.success({
        title: '成功',
        content: '禁用成功',
        closable: true,
      });
    } else {
      Notification.error({
        title: '失败',
        content: '禁用失败',
        closable: true,
      });
    }
    getRoadList();
  }
</script>

<template>
  <div class="contain">
    <a-table
      :stripe="true"
      class="top-table"
      :columns="columns"
      :data="localTableData"
    >
      <template #action="{ record }">
        <a-popconfirm
          content="你确定要启用吗?"
          ok-text="确认"
          cancel-text="取消"
          @ok="handleEdit(record)"
        >
          <a-button class="btn-location" type="primary">启用</a-button>
        </a-popconfirm>
        <a-popconfirm
          content="你确定要禁用吗?"
          ok-text="确认"
          cancel-text="取消"
          @ok="cancelEdit(record)"
        >
          <a-button class="btn-location">禁用</a-button>
        </a-popconfirm>
      </template>
    </a-table>
  </div>
</template>

<style scoped>
  .contain {
    width: 100%;
    margin: 10px;
  }
  .top-table {
    white-space: nowrap;
  }
  .btn-location {
    margin-left: 10px;
  }
</style>
